import React from 'react';

import './style/';
import {Icon, Button, message} from "antd";
import {WeaDialog, WeaLocaleProvider, WeaTools} from "ecCom";
import Setting_Tab from "./Setting_Tab";
const getLabel = WeaLocaleProvider.getLabel;

class User extends React.Component {

    state = {
        isSys:"1",
        userIconR:50,
        userDivR:50,
        bgColor:"#2f4977",
        fontsize:12,
        fontcolor:"#fff",
        visible:false,
        name:"",
        userIcon:"",
        userBm:"",
        bgtmd:"33",


    }

    onCancel = () => {
        this.getDatas();
       this.setState({visible: false});
    }

    getDatas = () => {
        WeaTools.callApi('/api/portal/customuser/getUserD','GET',{
            "id":this.props.id,
        }).then((result) => {
            WeaTools.callApi('/api/portal/account/getAccount','GET').then((data) => {
                if(result.api_status==true&&result.isCz==true){
                    let bg = result.setting.bgColor.split(',');
                    this.setState({userIconR:result.setting.userIconR,userDivR:result.setting.userDivR,fontcolor:result.setting.fontcolor,
                        bgColor:bg[0],bgtmd:bg[1],isSys: result.isSys,fontsize:result.setting.fontsize,name:data.data.username,userIcon:data.data.icon,userBm: data.data.deptname});
                }else if(result.api_status==true&&result.isCz==false) {
                    this.setState({name:data.data.username,userIcon:data.data.icon,userBm: data.data.deptname});
                }
            })


        })
    }

    componentDidMount(){
        this.getDatas();
    }

    saveSetting= () =>{
        WeaTools.callApi('/api/portal/customuser/saveUserD','POST',{
            jsonStr: JSON.stringify({
                "userIconR":this.state.userIconR,
                "userDivR":this.state.userDivR,
                "fontcolor":this.state.fontcolor,
                "fontsize":this.state.fontsize,
                "bgColor":this.state.bgColor+","+this.state.bgtmd,
                "id":this.props.id
            })
        }).then(result => {
            if(result.api_status==true){
                this.setState({visible:false});
                message.success(getLabel(83551,"保存成功！"),2);
            }else {
                message.error(getLabel(84544,"保存失败！"),2);
            }
        })

    }


    changeUserIconR = (value) => {
        this.setState({userIconR: value});
    }

    changeUserDivR = (value) => {
        this.setState({userDivR: value});
    }

    changeBgColor = (value) => {
        this.setState({bgColor: value});
    }

    changeFontSize = (value) => {
        this.setState({fontsize: value});

    }
    changebgTMD = (value) => {
        this.setState({bgtmd: value});
    }

    changeFontColor = (value) => {
        this.setState({fontcolor: value});
    }

    openDia = () => {
        this.setState({visible:true});
    }

    userCardInfo = () => {
        window.open("/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo");
    }

    changeHx = () => {

        let tmd = parseInt(this.state.bgtmd);
        if(tmd=='NaN'){
            tmd = 100;
        }
        const hxtmd = parseInt((tmd/100)*255);
        let temp = hxtmd.toString(16);
        if(hxtmd<10){
            temp ="0"+ temp;
        }
        return temp;

    }

    colorToRGB() {
        let color = this.state.bgColor
        let tmd = parseInt(this.state.bgtmd)/100;
        var color1, color2, color3;
        color = ""+color;
        if (typeof color !== "string") return;
        if (color.charAt(0) == "#") {
            color = color.substring(1);
        }
        var not16num = color.split("").filter(function (item, index) {
            return isNaN(parseInt(item, 16))
        });
        if(not16num.length) return;
        switch (color.length) {
            case 3:
                color1 = color.substr(0,1);
                color2 = color.substr(1,1);
                color3 = color.substr(2,1);
                color1 = color1 + color1;
                color2 = color2 + color2;
                color3 = color3 + color3;
                break;
            case 6:
                color1 = color.substr(0,2);
                color2 = color.substr(2,2);
                color3 = color.substr(4,2);
                break;
            default:
                return false;
        }
        color1 = parseInt(color1, 16);
        color2 = parseInt(color2, 16);
        color3 = parseInt(color3, 16);
        return "rgba("+color1+","+color2+","+color3+","+tmd+")";
    }


    render() {
        const {visible,userIconR,userDivR,bgColor,fontcolor,fontsize,userIcon,isSys,name,bgtmd,userBm} = this.state;
        let display ="";
        if(this.props.isSetting==false){
            display="none";
        }

        const bj = this.colorToRGB();

        let zitidaxiao = fontsize+"px";
        return (
            <div className="portal-com-user" style={{"border-radius":userDivR,"background-color":bj,"cursor": "pointer"}} >
                <img src={userIcon} alt=""  onClick={this.userCardInfo} style={{"border-radius":userIconR,width:47,height:47,"position":"absolute"}}/>
                <div style={{"color":fontcolor,"margin-left": 50,"margin-top": 6,"font-size":zitidaxiao}}>
                    <span  title={name} style={{    "display": "block",
                        "overflow": "hidden",
                        "text-overflow": "ellipsis",
                        "white-space": "nowrap",'margin-right':'15px','text-align':'center'}}>{name}</span>
                </div>
                <div style={{"color":fontcolor,"margin-left": 50,"margin-top": 2,"font-size":zitidaxiao}}>
                    <span     title={userBm} style={{    "display": "block",
                        "overflow": "hidden",
                        "text-overflow": "ellipsis",
                        "white-space": "nowrap",'margin-right':'15px','text-align':'center'}}>{userBm}</span>
                </div>

                <div className="div-diy-icon"    style={{"z-index":999,"display":display}}>
                    <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@3o2j1y`}  onClick={this.openDia} className="portal-icon-diy-layout" type="setting" theme="filled"    style={{"font-size":24,"color":"#000"}}/>
                </div>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@i291h6`} visible={visible} onCancel={this.onCancel} title={getLabel(30747,"设置")}>
                    <div style={{position:"relative",height:400}}>
                        <Setting_Tab ecId={`${this && this.props && this.props.ecId || ''}_Setting_Tab@5hgrov`}   settingInfo={this.state} changeUserIconR={this.changeUserIconR}
                                       changeUserDivR={this.changeUserDivR}
                                       changeBgColor={this.changeBgColor}
                                       changeFontSize={this.changeFontSize}
                                       changeFontColor={this.changeFontColor}
                                       changebgTMD={this.changebgTMD}

                        />
                        <div style={{position:"absolute",bottom:7,"margin-left": "67%"}}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@thnmhl`} onClick={this.saveSetting} type="primary">{getLabel(33703,"确认")}</Button>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vs9xod`} onClick={this.onCancel} style={{"margin-left":10}}>{getLabel(31129,"取消")}</Button>
                        </div>
                    </div>
                </WeaDialog>
            </div>
        );
    }
}

export default User;